<template>
    <div>
        <!--   <div style="margin-top: 1%">
             <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>活动列表</el-breadcrumb-item>
               <el-breadcrumb-item>活动详情</el-breadcrumb-item>
             </el-breadcrumb>
           </div>-->
        <!--搜索区域-->
        <div>
            <el-form :inline="true" :model="formInline">
                <el-form-item label="制单人">
                    <el-input v-model="formInline.user" placeholder="制单人"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="formInline.region" placeholder="订单状态">
                        <el-option label="已确认" value="1"></el-option>
                        <el-option label="未确认" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handelAdd">添加</el-button>
                </el-form-item>
            </el-form>

            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column v-for="item in tableColumn "
                                 :prop="item.prop"
                                 :label="item.label"
                                 :width="item.width">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleChangeStatus(scope.row)" type="text" size="small">确认订单状态</el-button>
                        <el-button type="text" size="small"@click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="tableData.length">
            </el-pagination>

            <!--添加-->
            <el-dialog title="收货地址" :visible.sync="showAddDialog">
                <el-form :model="form" :rules="rules" ref="ruleform" >
                    <el-form-item label="活动名称"  prop="name">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域"  prop="type">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showAddDialog = false">取 消</el-button>
                    <el-button type="primary" @click="handleConfine">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
  export default {
    name: 'index',
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        formInline: {
          user: '',
          region: '',

        },
        tableColumn: [
          {
            prop: 'dsdh',
            label: '验收单号',
          }, {
            prop: 'cgddh',
            label: '采购订单号',
          }, {
            prop: 'ysddh',
            label: '采购单号',
          }, {
            prop: 'gys',
            label: '供应商',
          }, {
            prop: 'cangku',
            label: '仓库',
          }, {
            prop: 'cgsl',
            label: '采购数量',
          }, {
            prop: 'dssl',
            label: '点收数量',
          }, {
            prop: 'zdrq',
            label: '制单日期',
          }, {
            prop: 'zdr',
            label: '制单人',
          }, {
            prop: 'djzt',
            label: '单据状态',
          }, {
            prop: 'beizu',
            label: '备注',
          },
        ],
        tableData: [
          {
            id:1,
            dsdh: 'SW2020092300001',
            cgddh: 'BF2020080700001',
            ysddh: 'BI2020091500001',
            gys: '473供应商',
            cangku: '15库店',
            cgsl: '237',
            dssl: '233',
            zdr: '3员工',
            djzt: '未确认',
            beizu: '',
          },   {
            id:2,
            dsdh: 'SW2020092300001',
            cgddh: 'BF2020080700001',
            ysddh: 'BI2020091500001',
            gys: '473供应商',
            cangku: '15库店',
            cgsl: '237',
            dssl: '233',
            zdr: '3员工',
            djzt: '未确认',
            beizu: '',
          },   {
            id:3,
            dsdh: 'SW2020092300001',
            cgddh: 'BF2020080700001',
            ysddh: 'BI2020091500001',
            gys: '473供应商',
            cangku: '15库店',
            cgsl: '237',
            dssl: '233',
            zdr: '3员工',
            djzt: '未确认',
            beizu: '',
          },
        ],
        showAddDialog: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    }
    ,
    methods: {
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      //确认添加
      handleConfine() {
        var validate = false;
        this.$refs['ruleform'].validate((valid) => {
          if (valid) {
            validate = true;
          } else {
            console.log('error submit!!');
            validate = false;
            return false;
          }
        });
        if (validate === false) {
          return;
        }

        this.showAddDialog = false;

      },
      handleDelete(row){
        this.$confirm('是否确定删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          for (let i=0;i<this.tableData.length;i++){
            if (row.id ==this.tableData[i].id){
              this.tableData.splice(i,1);
              this.$message.success("删除成功");
            }
          }

        }).catch(() => {
        });
      },
      //确认订单状态
      handleChangeStatus(row){
        for (let i=0;i<this.tableData.length;i++){
          if (row.id ==this.tableData[i].id){

            if (this.tableData[i].danStatus =='已确认'){
              this.$message.success("该订单已经确认");
            }else {
              this.tableData[i].danStatus = "已确认";
              this.$message.success("操作成功");
            }
          }
        }
      },
      handelAdd(){
        this.$router.push('/ProcurementManagement/yanshouDanMg/add')
      }
    },
  };
</script>

<style scoped>

</style>
